<template>
    <el-drawer v-model="visible" title="选号设置" size="660" direction="ltr" :modal="false" :lock-scroll="false"
        append-to-body show-close>
        <h3 class="m-0">教程</h3>
        <XhszHelp class="max-h-60 overflow-y-auto"></XhszHelp>
        <table class="w-full mt-4">
            <thead>
                <tr>
                    <th class="w-8 text-start">号数</th>
                    <th class="w-100 text-start">选号池</th>
                    <th class="w-52 text-start">
                        操作
                        <el-tooltip>
                            <template #content>显示走势图：在主界面表格中预览此号数走势图（注意，如欲点选号码，需关闭此面板）</template>
                            <el-icon>
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(n, idx) in 7" :key="idx">
                    <td>{{ n }}号</td>
                    <td>
                        <el-input size="small" v-model="columns[idx]" clearable placeholder="说明：号码之间以空格隔开" />
                    </td>
                    <td>
                        <el-button-group size="small">
                            <el-dropdown size="small" placement="top" @command="handleHistoryCommand(idx, $event)">
                                <el-button>
                                    填充<el-icon class="ms-1"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="clear">请选择</el-dropdown-item>
                                        <el-dropdown-item command="all">全部</el-dropdown-item>
                                        <el-dropdown-item command=">|1">开奖次数大于 1 次</el-dropdown-item>
                                        <el-dropdown-item command=">|2">开奖次数大于 2 次</el-dropdown-item>
                                        <el-dropdown-item command=">|3">开奖次数大于 3 次</el-dropdown-item>
                                        <el-dropdown-item command=">|5">开奖次数大于 5 次</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-button :type="activeColumnIndex == idx ? 'warning' : 'default'" size="small"
                                @click="onShowPoolBall(idx)">
                                显示走势图
                            </el-button>
                            <el-button @click="showStatMessage(idx)">统计</el-button>
                        </el-button-group>
                    </td>
                </tr>

            </tbody>
        </table>
        <div class="mt-1 mb-4 flex items-center justify-between">
            <el-button-group size="small">
                <el-button size="small" type="danger" @click="onShowPoolBall(0)">清除走势线</el-button>
                <el-button type="danger" @click="onReset()">重置</el-button>
                <el-button type="warning" @click="filterDialogInfo.visible = true">高级筛选</el-button>
            </el-button-group>
            <el-button-group size="small">
                <el-button type="info" @click="onExport()">导出</el-button>
                <el-button type="info" @click="onImport()">导入</el-button>
                <el-button size="small"
                    @click="statCombinDialogInfo.visible = !statCombinDialogInfo.visible">组合统计</el-button>
                <el-button size="small"
                    @click="statMergeDialogInfo.visible = !statMergeDialogInfo.visible">合并统计</el-button>
            </el-button-group>
        </div>
        <PoolInput v-model="poolAllText" :columns="columns"></PoolInput>
        <h3 class="m-0 mt-3">机选设置</h3>
        <div class="mt-2">
            <el-radio-group v-model="datasetType">
                <el-tooltip>
                    <template #content>说明：机选功能将从【综合选号池】中随机选号。</template>
                    <el-radio v-model="datasetType" value="xhc" size="small">使用综合选号池</el-radio>
                </el-tooltip>
                <el-tooltip>
                    <template #content>说明：机选功能将从每个号数的历史开奖号码中随机选择号码。</template>
                    <el-radio v-model="datasetType" value="hskjhm" size="small">使用号数相关的历史开奖号码</el-radio>
                </el-tooltip>
            </el-radio-group>
        </div>
        <template #footer>
            <el-button-group size="small">
                <CopyDsButton type="info" :data="formData"></CopyDsButton>
                <el-button type="info" @click="visible = false">关闭</el-button>
            </el-button-group>
        </template>
    </el-drawer>
    <FilterDialog v-model="filterDialogInfo.visible" />
    <StatCombinDialog v-model="statCombinDialogInfo.visible" :data="statCombinDialogInfo.data"></StatCombinDialog>
    <StatMergeDialog v-model="statMergeDialogInfo.visible" :data="statMergeDialogInfo.data"></StatMergeDialog>
    <ImportDialog v-model="importDialogInfo.visible" @submit="handleImport"></ImportDialog>
    <ExportDialog v-model="exportDialogInfo.visible" :xhc="exportDialogInfo.data.xhc"
        :gjsx="exportDialogInfo.data.gjsx">
    </ExportDialog>
</template>

<script setup>
/**
 * 选号设置对话框
 * @version 1.0.0
 */
import XhszHelp from './xhsz/components/XhszHelp.vue';
import StatCombinDialog from './xhsz/StatCombinDialog.vue';
import StatMergeDialog from './xhsz/StatMergeDialog.vue';
import CopyDsButton from './xhsz/components/CopyDsButton.vue';
import ImportDialog from './xhsz/ImportDialog.vue';
import ExportDialog from './xhsz/ExportDialog.vue';
import PoolInput from './xhsz/components/PoolInput.vue';
import FilterDialog from './xhsz/FilterDialog.vue';
import ObjectUtils from '@/utils/ObjectUtils';
import { ref, watch } from 'vue';
import DltDataModel from '@/model/DltDataModel';
import { useDltChartStateStore } from '@/stores/DltChartState';
import { ElMessage, ElMessageBox } from 'element-plus';

let dltDataModel = new DltDataModel();
const dltCS = useDltChartStateStore();
const visible = defineModel();
const activeColumnIndex = ref(dltCS.getColumnIndex());
const statDrawal = dltDataModel.getDrawalStat();
const columns = ref(['', '', '', '', '', '', '']);
const datasetType = ref('xhc'); //数据集类型：xhc=选号池, hskjhm=号数开奖号码, sykjhm=所有开奖号码, all=35+12全部号码
const filterDialogInfo = ref({ visible: false, data: {} });
const statCombinDialogInfo = ref({ visible: false, data: [], });
const statMergeDialogInfo = ref({ visible: false, data: [], });
const importDialogInfo = ref({ visible: false, });
const exportDialogInfo = ref({ visible: false, data: { xhc: [], gjsx: {} } });
// 综合选号池
const poolAllText = ref('');

watch(() => dltCS.getPoolNums(), (newVal) => {
    columns.value[dltCS.getColumnIndex()] = newVal.join(' ');
})

const formData = ref({
    // 数据分析
    trend: '',
    sumRange: '',
    frontRange: '',
    backRange: '',
    frontIncludes: '',
    frontExcludes: '',
    backIncludes: '',
    backExcludes: '',
    area1Count: 0,
    area2Count: 0,
    area3Count: 0,
    area4Count: 0,
    area5Count: 0,
    area6Count: 0,
    area7Count: 0,
    // 选号池
    poolText: '',
    // 购物车
    cart: [],
})

const handleHistoryCommand = (idx, command) => {
    if (command == 'all') {
        columns.value[idx] = ObjectUtils.statObjectToArr(statDrawal.statColumns[idx]).sort().join(' ');
        return;
    }
    if (command == 'clear') {
        columns.value[idx] = '';
        return;
    }
    let arr = command.split('|');
    columns.value[idx] = ObjectUtils.statObjectToArr(statDrawal.statColumns[idx], false, { op: arr[0], value: parseInt(arr[1]) }).sort().join(' ');
}
const onImport = () => {
    importDialogInfo.value.visible = true;
}

const handleImport = (_typeName, _poolColumns, _poolAllText, _filterInfo) => {
    if (_typeName == 'gjsx') {
        filterDialogInfo.value.data = _filterInfo;
    } else {
        columns.value = _poolColumns;
        poolAllText.value = _poolAllText;
    }
}
const onExport = () => {
    exportDialogInfo.value.visible = true;
    exportDialogInfo.value.data = { xhc: columns.value, gjsx: filterDialogInfo.value.data };
}

const onShowPoolBall = (idx) => {
    activeColumnIndex.value = activeColumnIndex.value == idx ? -1 : idx;
    dltCS.setColumnIndex(activeColumnIndex.value);
    dltCS.setPoolNums(activeColumnIndex.value == -1 ? [] : columns.value[idx].trim().split(' ').filter(v => v.trim().length > 0));
    visible.value = false;
}

const onReset = () => {
    ElMessageBox.confirm('重置操作将清空选号池，确定要重置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        activeColumnIndex.value = -1;
        dltCS.setColumnIndex(activeColumnIndex.value);
        columns.value = ['', '', '', '', '', '', ''];
        ElMessage.success('重置成功');
    })
}

const showStatMessage = (idx) => {
    let htmlStr = `开奖号码：${ObjectUtils.statObjectToArr(statDrawal.statColumns[idx]).join(' ')}<br />
    开奖频率：${ObjectUtils.statObjectToArr(statDrawal.statColumns[idx], true).join(' ')}<hr />
    理论区间范围：<br />
    开奖区间范围：<hr />
    超区频率：`;
    ElMessageBox.alert(htmlStr, { dangerouslyUseHTMLString: true, title: `${idx + 1}号球` });
}
</script>